<template>
  <div class="header-wrapper" :style="headerStyle">
    <div class="header-container">
      <!-- 左侧导航项 -->
      <div class="nav-left">
        <router-link to="/" class="nav-item">
          <el-icon><HomeFilled /></el-icon>
          首页
        </router-link>
        
        <!-- 归档下拉菜单 -->
        <el-dropdown trigger="click" @command="handleArchiveCommand">
          <div class="nav-item archive-dropdown">
            <el-icon><Folder /></el-icon>
            归档
            <el-icon class="el-icon--right"><CaretBottom /></el-icon>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="/timeline">
                <el-icon><Timer /></el-icon>时间轴
              </el-dropdown-item>
              <el-dropdown-item command="/tags">
                <el-icon><Collection /></el-icon>标签
              </el-dropdown-item>
              <el-dropdown-item command="/categories">
                <el-icon><Files /></el-icon>分类
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>

        <router-link to="/message" class="nav-item">
          <el-icon><ChatDotRound /></el-icon>
          留言
        </router-link>

        <router-link to="/friends" class="nav-item">
          <el-icon><Link /></el-icon>
          友链
        </router-link>
        <router-link to="/music" class="nav-item">
          <el-icon><Headset /></el-icon>
          音乐
        </router-link>
        <router-link to="/album" class="nav-item">
          <el-icon><Camera /></el-icon>
          相册
        </router-link>
        <router-link to="/about" class="nav-item">
          <el-icon><InfoFilled /></el-icon>
          关于
        </router-link>
      </div>

      <!-- 右侧功能区 -->
      <div class="nav-right">
        <div class="search-btn" @click="openSearch">
          <el-icon><Search /></el-icon>
        </div>
        <el-button type="primary" @click="$router.push('/login')">
          <el-icon><User /></el-icon>
          登录
        </el-button>
      </div>
    </div>
  </div>

  <!-- 搜索对话框 -->
  <SearchDialog ref="searchDialogRef" />
</template>

<script setup>
import { ref, onMounted, onUnmounted, computed, getCurrentInstance } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { 
  HomeFilled,
  Folder,
  Link,
  Headset,
  InfoFilled,
  Search,
  User,
  Timer,
  Collection,
  Files,
  CaretBottom,
  ChatDotRound,
  Camera,
} from '@element-plus/icons-vue'
import SearchDialog from './search-dialog.vue'

const router = useRouter()
const route = useRoute()
const activeIndex = ref(route.path)
const searchText = ref('')
const isSearchActive = ref(false)
const searchInputRef = ref(null)

const headerHeight = ref(0)
let lastScrollY = 0

const searchDialogRef = ref(null)

// 获取根组件实例
const app = getCurrentInstance()

// 计算 header 的样式
const headerStyle = computed(() => ({
  transform: `translateY(${headerHeight.value}px)`
}))

// 处理滚动事件
const handleScroll = () => {
  const currentScrollY = window.scrollY
  const scrollDiff = currentScrollY - lastScrollY

  // 向下滚动
  if (scrollDiff > 0) {
    // 逐渐隐藏 header
    headerHeight.value = Math.max(-56, headerHeight.value - scrollDiff)
  } 
  // 向上滚动
  else {
    // 逐渐显示 header
    headerHeight.value = Math.min(0, headerHeight.value - scrollDiff)
  }

  lastScrollY = currentScrollY
}

onMounted(() => {
  window.addEventListener('scroll', handleScroll, { passive: true })
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})


// 处理归档下拉菜单点击
const handleArchiveCommand = (command) => {
  router.push(command)
}

const openSearch = () => {
  searchDialogRef.value.visible = true
}

</script>

<style scoped>
.header-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: transform 0.3s ease;
}

.header-container {
  height: 56px;
  padding: 0 16px;
  background: var(--el-bg-color);
  border-bottom: 1px solid var(--el-border-color-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 当鼠标移动到顶部时显示 */
@media (hover: hover) {
  .header-wrapper:hover {
    transform: translateY(0) !important;
  }
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: 40px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--el-text-color-regular);
  text-decoration: none;
  font-size: 14px;
  padding: 0 8px;
  height: 56px;
  line-height: 56px;
}

.nav-item:hover,
.nav-item.router-link-active {
  color: var(--el-color-primary);
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-right: 40px;
}

.theme-switch {
  display: none;
}

.search-btn {
  cursor: pointer;
  font-size: 16px;
  color: var(--el-text-color-regular);
  padding: 8px;
  border-radius: 4px;
  transition: all 0.3s;
}

.search-btn:hover {
  color: var(--el-color-primary);
  background: var(--el-fill-color-light);
}

:deep(.el-button) {
  height: 32px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 4px;
}

:deep(.el-button .el-icon) {
  font-size: 16px;
}

.archive-dropdown {
  cursor: pointer;
  display: flex;
  align-items: center;
}

.archive-dropdown .el-icon--right {
  margin-left: 4px;
  font-size: 12px;
  transition: transform 0.3s;
}

.archive-dropdown:hover .el-icon--right {
  transform: rotate(180deg);
}
</style>


